<template>
  <div class="progressbar">
    <span class="time"
      >{{ parseInt(currentTime / 60)>9?parseInt(currentTime / 60):'0'+parseInt(currentTime / 60) }}:{{
        parseInt(currentTime % 60) > 9
          ? parseInt(currentTime % 60)
          : "0" + parseInt(currentTime % 60)
      }}</span
    >
    <div class="bar">
      <input
        class="range"
        type="range"
        :min="0"
        :max="duration"
        v-model="value"
        @input="isvalue = false"
        @change="upcurrentTime(value)"
      />
      <div class="pretty">
        <div class="inside" :style="`width:${(value / duration) * 100}%`"></div>
      </div>
    </div>
    <span class="time"
      >{{ parseInt(duration / 60) > 9 ? parseInt(duration / 60):'0'+parseInt(duration / 60)}}:{{
        parseInt(duration % 60) > 9
          ? parseInt(duration % 60)
          : "0" + parseInt(duration % 60)
      }}</span
    >
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
    computed:{
        ...mapState(["duration","currentTime"])
    },
    data(){
        return{
            value:this.currentTime*1,
            isvalue: true,
        }
    },
    watch:{
        currentTime:function(n){
            if(this.isvalue){
                this.value = n*1
            }
        }
    },
    methods:{
        upcurrentTime(value){
            this.$store.commit('upnewcurrentTime',{value:value*1});
            this.isvalue=true
        }
    }
};
</script>

<style lang="less" scoped>
.progressbar {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  .time {
    font-size: 14px;
    color: #fff;
    &:nth-of-type(1) {
      margin-right: 8px;
    }
    &:nth-of-type(2) {
      margin-left: 8px;
    }
  }
  .bar {
    flex: 1;
    position: relative;
    z-index: 1;
    .range {
      width: 100%;
      opacity: 0;
    }
    .pretty {
      height: 3px;
      width: 100%;
      background-color: rgba(200, 200, 200, 0.3);
      border-radius: 8px;
      top: 8px;
      left: 0;
      position: absolute;
      z-index: -1;
      .inside {
        position: absolute;
        background-color: #ee0a24;
        height: 100%;
        border-radius: 9px;
        top: 0;
        left: 0;
        &::before {
          content: "";
          width: 7px;
          height: 10px;
          position: absolute;
          top: -4px;
          right: -5px;
          border-radius: 2px;
          background-color: white;
        }
      }
    }
  }
}
</style>